/* * @Author: hhy * @Date: 2019-02-20 17:09:10 * @Last Modified by: chenjie *
@Last Modified time: 2019-03-29 15:25:37 * @文件说明: tabs */
<template>
  <div class="all-tabs">
    <el-tabs
      v-model="activeName"
      :type="type"
      @tab-click="tabClick"
      :class="{ noline: noline }"
    >
      <el-tab-pane
        v-for="i in tTabPane"
        :key="i.name"
        :label="i.label"
        :name="i.name + ''"
      />
      <slot />
    </el-tabs>
  </div>
</template>
<script>
import { defineComponent, toRefs, reactive, watch } from "vue";
import { setItem } from "@/utils/storage";
export default defineComponent({
  props: {
    type: {},
    tabValue: {
      type: [String, Number],
      default: "",
    },
    tabPane: {
      type: Array,
      default() {
        return [
          {
            name: "all",
            label: "全部",
          },
          {
            name: "other",
            label: "其他",
          },
        ];
      },
    },
    local: {
      type: String,
      default: "",
    },
    t: {
      type: Boolean,
      default: false,
    },
    noline: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["tabValue", "click"],
  setup(props, context) {
    const state = reactive({
      tTabPane: props.tabPane,
      activeName: null,
    });
    state.activeName = props.tabValue || state.tTabPane[0].name;
    const watchTab = () => {
      if (props.t) {
        state.tTabPane = props.tabPane.map((val) => {
          return {
            name: val.Id,
            label: val.Name,
          };
        });
      }
    };
    watch(props, () => {
      watchTab();
      state.activeName = props.tabValue || state.tTabPane[0].name;
    });

    const tabClick = (e) => {
      state.activeName = e.props.name;
      if (props.local) {
        setItem(props.local, state.activeName);
      }
      if (props.tabValue) {
        context.emit("update:tabValue", state.activeName);
      }
      context.emit("click", state.activeName);
    };
    return {
      ...toRefs(state),
      tabClick,
    };
  },
});
</script>

<style lang="scss" >
.all-tabs {
  .noline {
    .el-tabs__nav-wrap {
      &::after {
        display: none;
      }
    }
  }
  .el-tabs__nav-wrap {
    &::after {
      height: 1px;
      background-color: $border;
    }
  }
}
</style>
<style>
.el-tabs__active-bar {
  transition: transform 0s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
}
</style>
